<script setup>
import { ref, onMounted } from 'vue'
import _axios from '../../utils/myAxios.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { get } from '@vueuse/core';

let router = useRouter()

let article = ref({})
let current = ref(1)
let size = ref(10)
let total = ref(0)
let hasMore = ref(true)

function getId() {
    const urlParam = new URLSearchParams(window.location.hash.split("?")[1]);
    let id = urlParam.get('articleId')
    if (!id) {
        useRouter.push('/home')
    }
    return id
}
async function getArticleId() {
    let id = getId()
    let resp = await _axios.get(`/api/article/${id}`)
    if (resp.data.code == 200) {
        article.value = resp.data.data
    } else {
        ElMessage({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            appendTo: "#app",
        })
        router.push("/home")
    }
}

let commentList = ref([])
async function getCommentList(flag) {
    let articleId = getId()
    let resp = await _axios.get('/api/comment/commentList', {
        params: {
            articleId: articleId,
            pageCurrent: current.value,
            pageSize: size.value
        }
    })
    if (resp.data.code == 200) {
        if (flag) {
            commentList.value = resp.data.data.rows
        } else {
            resp.data.data.rows.forEach(item => {
                commentList.value.push(item)
            })
            // commentList.value = commentList.value.concat(resp.data.data.rows)
        }
        total.value = resp.data.data.total
        if (total.value <= commentList.value.length) {
            hasMore.value = false
        } else {
            current.value += 10
            hasMore.value = true
        }
    }
}

onMounted(() => {
    getArticleId()
    getCommentList(true)
})

// -------------------------------------------------------------评论-------------------------------------------------------
let isRespond = ref(false)

let pBody = ref(true)

let OwOlist = ref([{ 'title': '微笑', 'url': 'weixiao.gif' },//表情包和表情路径
{ 'title': '嘻嘻', 'url': 'xixi.gif' },
{ 'title': '哈哈', 'url': 'haha.gif' },
{ 'title': '可爱', 'url': 'keai.gif' },
{ 'title': '可怜', 'url': 'kelian.gif' },
{ 'title': '挖鼻', 'url': 'wabi.gif' },
{ 'title': '吃惊', 'url': 'chijing.gif' },
{ 'title': '害羞', 'url': 'haixiu.gif' },
{ 'title': '挤眼', 'url': 'jiyan.gif' },
{ 'title': '闭嘴', 'url': 'bizui.gif' },
{ 'title': '鄙视', 'url': 'bishi.gif' },
{ 'title': '爱你', 'url': 'aini.gif' },
{ 'title': '泪', 'url': 'lei.gif' },
{ 'title': '偷笑', 'url': 'touxiao.gif' },
{ 'title': '亲亲', 'url': 'qinqin.gif' },
{ 'title': '生病', 'url': 'shengbing.gif' },
{ 'title': '太开心', 'url': 'taikaixin.gif' },
{ 'title': '白眼', 'url': 'baiyan.gif' },
{ 'title': '右哼哼', 'url': 'youhengheng.gif' },
{ 'title': '左哼哼', 'url': 'zuohengheng.gif' },
{ 'title': '嘘', 'url': 'xu.gif' },
{ 'title': '衰', 'url': 'shuai.gif' },
{ 'title': '吐', 'url': 'tu.gif' },
{ 'title': '哈欠', 'url': 'haqian.gif' },
{ 'title': '抱抱', 'url': 'baobao.gif' },
{ 'title': '怒', 'url': 'nu.gif' },
{ 'title': '疑问', 'url': 'yiwen.gif' },
{ 'title': '馋嘴', 'url': 'chanzui.gif' },
{ 'title': '拜拜', 'url': 'baibai.gif' },
{ 'title': '思考', 'url': 'sikao.gif' },
{ 'title': '汗', 'url': 'han.gif' },
{ 'title': '困', 'url': 'kun.gif' },
{ 'title': '睡', 'url': 'shui.gif' },
{ 'title': '钱', 'url': 'qian.gif' },
{ 'title': '失望', 'url': 'shiwang.gif' },
{ 'title': '酷', 'url': 'ku.gif' },
{ 'title': '色', 'url': 'se.gif' },
{ 'title': '哼', 'url': 'heng.gif' },
{ 'title': '鼓掌', 'url': 'guzhang.gif' },
{ 'title': '晕', 'url': 'yun.gif' },
{ 'title': '悲伤', 'url': 'beishang.gif' },
{ 'title': '抓狂', 'url': 'zhuakuang.gif' },
{ 'title': '黑线', 'url': 'heixian.gif' },
{ 'title': '阴险', 'url': 'yinxian.gif' },
{ 'title': '怒骂', 'url': 'numa.gif' },
{ 'title': '互粉', 'url': 'hufen.gif' },
{ 'title': '书呆子', 'url': 'shudaizi.gif' },
{ 'title': '愤怒', 'url': 'fennu.gif' },
{ 'title': '感冒', 'url': 'ganmao.gif' },
{ 'title': '心', 'url': 'xin.gif' },
{ 'title': '伤心', 'url': 'shangxin.gif' },
{ 'title': '猪', 'url': 'zhu.gif' },
{ 'title': '熊猫', 'url': 'xiongmao.gif' },
{ 'title': '兔子', 'url': 'tuzi.gif' },
{ 'title': '喔克', 'url': 'ok.gif' },
{ 'title': '耶', 'url': 'ye.gif' },
{ 'title': '棒棒', 'url': 'good.gif' },
{ 'title': '不', 'url': 'no.gif' },
{ 'title': '赞', 'url': 'zan.gif' },
{ 'title': '来', 'url': 'lai.gif' },
{ 'title': '弱', 'url': 'ruo.gif' },
{ 'title': '草泥马', 'url': 'caonima.gif' },
{ 'title': '神马', 'url': 'shenma.gif' },
{ 'title': '囧', 'url': 'jiong.gif' },
{ 'title': '浮云', 'url': 'fuyun.gif' },
{ 'title': '给力', 'url': 'geili.gif' },
{ 'title': '围观', 'url': 'weiguan.gif' },
{ 'title': '威武', 'url': 'weiwu.gif' },
{ 'title': '话筒', 'url': 'huatong.gif' },
{ 'title': '蜡烛', 'url': 'lazhu.gif' },
{ 'title': '蛋糕', 'url': 'dangao.gif' },
{ 'title': '发红包', 'url': 'fahongbao.gif' }
])
function choseEmoji(title) {
    form.value.textarea += '[' + title + ']'
}

const sendTip = ref('发送~')
let form = ref({
    articleId: getId(),
    type: 0,
    textarea: '',
    rootId: -1,//根评论id，如果是针对文字评论直接用-1表示
    toCommentId: -1,//所回复评论的id
    toCommentUserId: "-1"//所评论的用户id
})

function resetForm() {
    form.value = {
        articleId: getId(),
        type: 0,
        textarea: '',
        rootId: -1,//根评论id，如果是针对文字评论直接用-1表示
        toCommentId: -1,//所回复评论的id
        toCommentUserId: "-1"//所评论的用户id
    }
}

//发送评论
async function sendComment() {
    if (form.value.textarea !== '') {
        sendTip.value = '咻~~';
        let resp = await _axios.post('/api/comment/addComment', {
            articleId: form.value.articleId,
            type: form.value.type,
            content: form.value.textarea,
            rootId: form.value.rootId,
            toCommentId: form.value.toCommentId,
            toCommentUserId: form.value.toCommentUserId
        })
        if (resp.data.code === 200) {
            ElMessage({
                showClose: true,
                message: '评论成功',
                type: 'success',
                appendTo: "#app"
            })
        } else {
            ElMessage({
                showClose: true,
                message: resp.data.message,
                type: 'error',
                appendTo: "#app"
            })
        }
        cancelResponse()
        freshComment()
        resetForm()
        var timer02 = setTimeout(function () {
            sendTip.value = '发送~';
            clearTimeout(timer02);
        }, 1000)
    } else {
        sendTip.value = '内容不能为空~'
        var timer = setTimeout(function () {
            sendTip.value = '发送~';
            clearTimeout(timer);
        }, 3000)
    }
}

function freshComment() {//刷新评论
    current.value = 1
    getCommentList(true)
}

// 解析并替换评论里的表情包，返回解析完后的评论
function analyzeEmoji(cont) {//编译表情替换成图片展示出来
    let pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
    let pattern2 = /\[[\u4e00-\u9fa5]+\]/;
    let content = cont.match(pattern1);
    let str = cont;
    if (content) {
        for (let i = 0; i < content.length; i++) {
            let src = ''
            for (let j = 0; j < OwOlist.value.length; j++) {
                if ("[" + OwOlist.value[j].title + "]" == content[i]) {
                    src = OwOlist.value[j].url;
                    break;
                }
            }
            // str = str.replace(pattern2, '<img src="src/assets/biaoqing/' + src + '"/>');
            str = str.replace(pattern2, '<img src="http://47.92.174.180:8080/profile/biaoqing/' + src + '"/>');
            src = ''
        }
    }
    return str;
}

//评论框
let respondBox = ref(null)

//评论框外边的盒子
let megBox = ref(null)

//评论的数量
let commentCount = ref(null)

//评论回复
function responseMeg(rootId, toCommentId, toCommentUserId) {
    let dom = event.currentTarget.parentNode;
    isRespond.value = true;
    form.value.rootId = rootId
    form.value.toCommentId = toCommentId;
    form.value.toCommentUserId = toCommentUserId
    dom.appendChild(respondBox.value);
}

//取消回复
function cancelResponse() {
    isRespond.value = false;
    resetForm()
    megBox.value.insertBefore(respondBox.value, commentCount.value);
}
</script>

<template>
    <div class="contentLeft">
        <div class="article-content">
            <div class="card" v-if="article !== null">
                <ul>
                    <li>
                        <div>
                            <div class="article-content-hd">
                                <a>
                                    <span> {{ article.title }} </span>
                                </a>
                                <p><el-icon>
                                        <Avatar />
                                    </el-icon>发表于&nbsp;<el-icon>
                                        <Clock />
                                    </el-icon>
                                    {{ article.createTime }}·
                                    <el-icon>
                                        <View />
                                    </el-icon>{{ article.viewCount }}次&nbsp;围观
                                </p>
                            </div>
                            <el-button type="success" plain v-if="article.categoryName">
                                <el-icon>
                                    <Discount />
                                </el-icon>分类&nbsp;<span style="font-weight: 600;">{{ article.categoryName
                                    }}</span></el-button>
                            <div class="article-content-item">
                                <p>{{ article.summary }}</p>
                                <div class="img">
                                    <img :src="article.thumbnail">
                                </div>
                            </div>
                            <div class="article-main-content">
                                <div v-html="article.content"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card" style="padding-bottom: 50px;">
            <div class="article-comment" v-if="article.isComment === 1" ref="megBox">
                <form class="form-article" ref="respondBox">
                    <h3>发表评论<el-button type="primary" v-if="isRespond" text @click="cancelResponse"
                            style="font-size: 16px;">
                            取消回复
                        </el-button>
                    </h3>
                    <el-input type="textarea" :rows="4" placeholder="说点什么呢``" v-model="form.textarea">
                    </el-input>
                    <div :class="pBody ? 'OwO' : 'OwO OwO-open'">
                        <div class="OwO-logo" @click="pBody = !pBody">
                            <span>OwO表情</span>
                        </div>
                        <div class="OwO-body">
                            <ul class="OwO-items">
                                <li class="OwO-item" v-for="(oitem, index) in OwOlist" :key="'oitem' + index"
                                    @click="choseEmoji(oitem.title)">
                                    <img style="width: 25px;height: 25px;" :src="'http://47.92.174.180:8080/profile/biaoqing/' + oitem.url"
                                        alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <el-row class="tmsg-r-info">
                        <el-col :span="24" class="info-submit">
                            <el-button style="width: 100%;" @click="sendComment" type="primary">{{ sendTip
                                }}</el-button>
                        </el-col>
                    </el-row>
                </form>
                <div class="comment-count" ref="commentCount">
                    活捉 {{ commentList ? commentList.length : 0 }} 条
                </div>
            </div>
            <template v-for="(item, index) in commentList" :key="'comment' + index">
                <div class="comment-list">
                    <img :src="item.avatar ? item.avatar : 'http://47.92.174.180:8080/profile/2025/04/11/7a49c4e3c0ab4b059b187a60eefb2cfa.jpg'"
                        alt="">
                    <div class="comment-info">
                        <div style="font-weight: 600;font-size: 15px;">
                            {{ item.nickname }}
                        </div>
                        <div style="font-size: 12px;color: #8491A5;">
                            {{ item.createTime }}
                        </div>
                        <div style="font-size: 15px;margin-top: 5px;align-items: center;display: flex;"
                            v-html="analyzeEmoji(item.content)"></div>
                        <el-button type="primary" style="padding: 0;" text
                            @click="responseMeg(item.id, item.id, item.createBy)">
                            回复
                        </el-button>
                    </div>
                </div>
                <div class="comment-clist" v-if="item.children">
                    <div style="display: flex;" v-for="(citem, cindex) in item.children" :key="'citem' + index">
                        <img :src="citem.avatar ? citem.avatar : 'http://47.92.174.180:8080/profile/2025/04/11/7a49c4e3c0ab4b059b187a60eefb2cfa.jpg'"
                            alt="">
                        <div class=" comment-cinfo">
                            <div style="font-weight: 600;margin-top: 5px;">
                                {{ citem.nickname }} 回复 {{ citem.toCommentUserName }}
                            </div>
                            <div style="font-size: 12px;color: #8491A5;">
                                {{ citem.createTime }}
                            </div>
                            <div style="font-size: 15px;align-items: center;display: flex;"
                                v-html="analyzeEmoji(citem.content)"></div>
                            <el-button type="primary" style="padding: 0;" text
                                @click="responseMeg(item.id, citem.id, citem.createBy)">
                                回复
                            </el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <el-button v-if="hasMore" type="primary" style="width:100%;margin-top: 20px"
            @click="getCommentList(false)">点击加载更多</el-button>
        <el-button v-else plain type="primary" style="width:100%;margin-top: 20px">暂无更多数据</el-button>
    </div>
</template>

<style scoped>
.article-content ul {
    padding: 0;
    width: 100%;
}

.article-content ul li {
    list-style-type: none;
    padding: 20px 0;
}

.article-content-hd {
    margin-bottom: 30px;
    text-align: center;
}


.article-content-hd span {
    font-size: 24px;
    font-weight: 600;
    margin-left: 5px;
    color: #000;
}

.article-content-hd p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-content-item {
    padding: 20px;
}

.article-content-item .img {
    text-align: center;
    margin-bottom: 5px;
}

.article-content-item .img img {
    width: 80%;
}

.article-main-content {
    padding: 20px;
}

.article-comment {
    width: 100%;
    background-color: var(--el-page-bg-color);
}

.form-article {
    padding: 10px;
}

.article-comment .comment-count {
    width: 100%;
    border-left: 2px solid #000;
    padding-left: 10px;
    font-weight: 600;
    margin: 10px 0 10px 10px;
}

.card .comment-list {
    display: flex;
    margin: 5px 10px 0 10px;
    border-bottom: 1px solid var(--el-border-color);
    padding: 0;
}

.comment-list img {
    width: 75px;
    border-radius: 50%;
    height: 75px;
}

.comment-list .comment-info {
    margin-left: 12px;
    width: 100%;
    height: 100%;
}

.card .comment-clist {
    margin: 5px 5px 0 90px;
    padding: 5px 0;
}

.comment-clist img {
    width: 70px;
    border-radius: 50%;
    height: 70px;
}

.comment-clist .comment-cinfo {
    margin-left: 12px;
    width: 100%;
    height: 100%;
}

.OwO {
    position: relative;
    z-index: 1;
}

.OwO .OwO-logo {
    position: relative;
    border-radius: 4px;
    color: #444;
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    padding: 0 6px;
    cursor: pointer;
    height: 30px;
    box-sizing: border-box;
    z-index: 2;
    line-height: 30px;
}

.OwO .OwO-logo:hover {
    animation: a 5s infinite ease-in-out;
    -webkit-animation: a 5s infinite ease-in-out;
}

.OwO .OwO-body {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 1;
    top: 29px;
    border-radius: 0 4px 4px 4px;
    display: none;
}

.OwO-open .OwO-body {
    display: block;
}

.OwO-open .OwO-logo {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}

.OwO-open .OwO-logo:hover {
    animation: none;
    -webkit-animation: none;
}

.OwO .OwO-items {
    max-height: 197px;
    overflow: scroll;
    font-size: 0;
    padding: 10px;
    z-index: 1
}

.OwO .OwO-items .OwO-item {
    background: #f7f7f7;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0 10px 12px 0;
    transition: 0.3s;
    line-height: 19px;
    font-size: 20px;
    cursor: pointer;
}

.OwO .OwO-items .OwO-item:hover {
    background: #eee;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
        0 3px 1px -2px rgba(0, 0, 0, .2),
        0 1px 5px 0 rgba(0, 0, 0, .12);
    animation: a 5s infinite ease-in-out;
    -webkit-animation: a 5s infinite ease-in-out;
}

@-webkit-keyframes a {
    2% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    4% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    8% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    10% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }

    12% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    14% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }

    18% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }

    20% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }

    24% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    26% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }

    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }

    30% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    32%,
    34% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }

    36% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    38% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    40% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }

    44% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }

    46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    48% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }

    52% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    56% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }

    60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    62% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    64% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }

    68% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }

    72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }

    74% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    76% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    78% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }

    86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }

    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }

    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }

    96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    0%,
    to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}

@keyframes a {
    2% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    4% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    6% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    8% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    10% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }

    12% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    14% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    16% {
        -webkit-transform: translateY(-.5px) rotate(-1.5deg);
        transform: translateY(-.5px) rotate(-1.5deg)
    }

    18% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }

    20% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    22% {
        -webkit-transform: translateY(.5px) rotate(-1.5deg);
        transform: translateY(.5px) rotate(-1.5deg)
    }

    24% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    26% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }

    28% {
        -webkit-transform: translateY(.5px) rotate(1.5deg);
        transform: translateY(.5px) rotate(1.5deg)
    }

    30% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    32%,
    34% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }

    36% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    38% {
        -webkit-transform: translateY(1.5px) rotate(-1.5deg);
        transform: translateY(1.5px) rotate(-1.5deg)
    }

    40% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    42% {
        -webkit-transform: translateY(2.5px) rotate(-1.5deg);
        transform: translateY(2.5px) rotate(-1.5deg)
    }

    44% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }

    46% {
        -webkit-transform: translateY(-1.5px) rotate(2.5deg);
        transform: translateY(-1.5px) rotate(2.5deg)
    }

    48% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    50% {
        -webkit-transform: translateY(.5px) rotate(.5deg);
        transform: translateY(.5px) rotate(.5deg)
    }

    52% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    54% {
        -webkit-transform: translateY(-1.5px) rotate(1.5deg);
        transform: translateY(-1.5px) rotate(1.5deg)
    }

    56% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    58% {
        -webkit-transform: translateY(.5px) rotate(2.5deg);
        transform: translateY(.5px) rotate(2.5deg)
    }

    60% {
        -webkit-transform: translateY(2.5px) rotate(2.5deg);
        transform: translateY(2.5px) rotate(2.5deg)
    }

    62% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    64% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    66% {
        -webkit-transform: translateY(1.5px) rotate(-.5deg);
        transform: translateY(1.5px) rotate(-.5deg)
    }

    68% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    70% {
        -webkit-transform: translateY(1.5px) rotate(.5deg);
        transform: translateY(1.5px) rotate(.5deg)
    }

    72% {
        -webkit-transform: translateY(2.5px) rotate(1.5deg);
        transform: translateY(2.5px) rotate(1.5deg)
    }

    74% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    76% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    78% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    80% {
        -webkit-transform: translateY(1.5px) rotate(1.5deg);
        transform: translateY(1.5px) rotate(1.5deg)
    }

    82% {
        -webkit-transform: translateY(-.5px) rotate(.5deg);
        transform: translateY(-.5px) rotate(.5deg)
    }

    84% {
        -webkit-transform: translateY(1.5px) rotate(2.5deg);
        transform: translateY(1.5px) rotate(2.5deg)
    }

    86% {
        -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
        transform: translateY(-1.5px) rotate(-1.5deg)
    }

    88% {
        -webkit-transform: translateY(-.5px) rotate(2.5deg);
        transform: translateY(-.5px) rotate(2.5deg)
    }

    90% {
        -webkit-transform: translateY(2.5px) rotate(-.5deg);
        transform: translateY(2.5px) rotate(-.5deg)
    }

    92% {
        -webkit-transform: translateY(.5px) rotate(-.5deg);
        transform: translateY(.5px) rotate(-.5deg)
    }

    94% {
        -webkit-transform: translateY(2.5px) rotate(.5deg);
        transform: translateY(2.5px) rotate(.5deg)
    }

    96% {
        -webkit-transform: translateY(-.5px) rotate(1.5deg);
        transform: translateY(-.5px) rotate(1.5deg)
    }

    98% {
        -webkit-transform: translateY(-1.5px) rotate(-.5deg);
        transform: translateY(-1.5px) rotate(-.5deg)
    }

    0%,
    to {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
    }
}

.tmsg-r-info input {
    height: 30px;
    border-radius: 4px;
    background: #f4f6f7;
}

.tmsg-r-info .info-submit {
    margin: 10px 0;
    text-align: center;
}
</style>